/**
 *  @互联家
 *  @互联家商户订单组件 
 */

import React, { Component } from 'react';
import { StyleSheet, ScrollView, View, Text, Image, Button, TouchableHighlight } from 'react-native';

/**
 *  @component
 *  @顶部切换组件导入
 */
import SwitchBar from "../components/SwitchBar";

/**
 *  @style
 *  @页面主要样式表导入
 */
import orderStyle from '../styles/order';

const textimage = require('../assets/images/img/ash.png');

export default class HomeScreen extends Component {

  render() {
    return (
      <ScrollView style={styles.scrollContainer}>
        <View style={styles.container}>

          <SwitchBar />

          <View style={styles.orderItem}>
            <View style={styles.orderItemIdBox}>
              <Text style={styles.orderItemId}>订单编号：201811546872</Text>
              <Text style={styles.orderItemStatusActive}>待支付</Text>
            </View>
            <TouchableHighlight underlayColor="#ffffff"  onPress={() => this.props.navigation.navigate('OrderDetail')}>
              <View style={styles.orderItemTheme}>
                <Image style={styles.orderItemThemeImage} source={textimage} />
                <View style={styles.orderItemThemeMain}>
                  <View style={styles.orderItemThemeMainRowStart}>
                    <Text style={styles.orderItemThemeTitle} numberOfLines={2}>无锡新区桔子·精酒店豪华大水床 包早午饭有温泉泡</Text>
                  </View>
                  <View style={styles.orderItemThemeMainRowStart}>
                    <Text style={styles.orderItemThemeComment} numberOfLines={1}>6106好评</Text>
                  </View>
                  <View style={styles.orderItemThemeMainRowStart}>
                    <Text style={styles.orderItemThemeNowFee} numberOfLines={1}>¥288.00</Text>
                    <Text style={styles.orderItemThemeOldFee} numberOfLines={1}>¥288.00</Text>
                  </View>
                  <View style={styles.orderItemThemeMainRowEnd}>
                    <Text style={styles.orderItemThemeNum} numberOfLines={1}>X1</Text>
                  </View>
                </View>
              </View>
            </TouchableHighlight>
            <TouchableHighlight underlayColor="#ffffff" onPress={() => this.props.navigation.navigate('OrderDetail')}>
              <View style={styles.orderItemTotalFee}>
                <Text style={styles.orderItemTotalFeeTheme}>共一件商品&nbsp;合计:¥288.00</Text>
              </View>
            </TouchableHighlight>
            <View style={styles.orderItemDetailButton}>
              <View style={styles.orderItemDetailButtonBox}>
                <Button
                  onPress={() => this.props.navigation.navigate('OrderDetail')}
                  title="查看订单"
                  color="#0766f1"
                  accessibilityLabel="点击查看订单详情"
                />
              </View>
            </View>
          </View>

          <View style={styles.orderItem}>
            <View style={styles.orderItemIdBox}>
              <Text style={styles.orderItemId}>订单编号：201811546872</Text>
              <Text style={styles.orderItemStatusActive}>待入住</Text>
            </View>
            <View style={styles.orderItemTheme}>
              <Image style={styles.orderItemThemeImage} source={textimage} />
              <View style={styles.orderItemThemeMain}>
                <View style={styles.orderItemThemeMainRowStart}>
                  <Text style={styles.orderItemThemeTitle} numberOfLines={2}>无锡新区桔子·精酒店豪华大水床 包早午饭有温泉泡</Text>
                </View>
                <View style={styles.orderItemThemeMainRowStart}>
                  <Text style={styles.orderItemThemeComment} numberOfLines={1}>6106好评</Text>
                </View>
                <View style={styles.orderItemThemeMainRowStart}>
                  <Text style={styles.orderItemThemeNowFee} numberOfLines={1}>¥288.00</Text>
                  <Text style={styles.orderItemThemeOldFee} numberOfLines={1}>¥288.00</Text>
                </View>
                <View style={styles.orderItemThemeMainRowEnd}>
                  <Text style={styles.orderItemThemeNum} numberOfLines={1}>X1</Text>
                </View>
              </View>
            </View>
            <View style={styles.orderItemTotalFee}>
              <Text style={styles.orderItemTotalFeeTheme}>共一件商品&nbsp;合计:¥288.00</Text>
            </View>
            <View style={styles.orderItemDetailButton}>
              <View style={styles.orderItemDetailButtonBox}>
                <Button
                  onPress={() => this.props.navigation.navigate('OrderDetail')}
                  title="查看订单"
                  color="#0766f1"
                  accessibilityLabel="点击查看订单详情"
                />
              </View>
            </View>
          </View>

          <View style={styles.orderItem}>
            <View style={styles.orderItemIdBox}>
              <Text style={styles.orderItemId}>订单编号：201811546872</Text>
              <Text style={styles.orderItemStatus}>已完成</Text>
            </View>
            <View style={styles.orderItemTheme}>
              <Image style={styles.orderItemThemeImage} source={textimage} />
              <View style={styles.orderItemThemeMain}>
                <View style={styles.orderItemThemeMainRowStart}>
                  <Text style={styles.orderItemThemeTitle} numberOfLines={2}>无锡新区桔子·精酒店豪华大水床 包早午饭有温泉泡</Text>
                </View>
                <View style={styles.orderItemThemeMainRowStart}>
                  <Text style={styles.orderItemThemeComment} numberOfLines={1}>6106好评</Text>
                </View>
                <View style={styles.orderItemThemeMainRowStart}>
                  <Text style={styles.orderItemThemeNowFee} numberOfLines={1}>¥288.00</Text>
                  <Text style={styles.orderItemThemeOldFee} numberOfLines={1}>¥288.00</Text>
                </View>
                <View style={styles.orderItemThemeMainRowEnd}>
                  <Text style={styles.orderItemThemeNum} numberOfLines={1}>X1</Text>
                </View>
              </View>
            </View>
            <View style={styles.orderItemTotalFee}>
              <Text style={styles.orderItemTotalFeeTheme}>共一件商品&nbsp;合计:¥288.00</Text>
            </View>
            <View style={styles.orderItemDetailButton}>
              <View style={styles.orderItemDetailButtonBox}>
                <Button
                  onPress={() => this.props.navigation.navigate('OrderDetail')}
                  title="查看订单"
                  color="#0766f1"
                  accessibilityLabel="点击查看订单详情"
                />
              </View>
            </View>
          </View>



        </View>
      </ScrollView>
    )
  }
};

const styles = StyleSheet.create(orderStyle);